<template>
  <!-- 受众 -->
  <el-dialog
    :visible="visible"
    :show-close="false"
    top="5vh"
    class="yyy-dialog"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="500px"
  >
    <div slot="title" class="head">
      <div class="title">{{ title }}</div>
      <i class="el-icon-error" @click="handleClose" />
    </div>
    <div class="dialog-main">
      <el-form id="audiences-form" ref="form" :model="form" label-position="top" size="small">
        <el-form-item label="设备">
          <el-select v-model="form.deviceClass" placeholder="iPad和iphone">
            <el-option label="仅限iPad" value="IPAD" />
            <el-option label="仅限iPhone" value="IPHONE" />
            <el-option label="iPad和iPhone" value="IPAD,IPHONE" />
            <!-- 到时候还要转换成数组 -->
          </el-select>
        </el-form-item>
        <el-form-item label="用户">
          <el-select v-model="form.appDownloaders" placeholder="所用用户">
            <el-option label="所有用户" value="all" />
            <el-option label="新用户" value="new" />
          </el-select>
        </el-form-item>

        <el-form-item label="特征">
          <el-row :gutter="14">
            <el-col :span="12">
              <el-select v-model="form.gender" placeholder="iPad和iphone">
                <el-option label="所有性别" value="NULL" />
                <el-option label="男性" value="M" />
                <el-option label="女性" value="F" />
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="12">
                <el-col :span="12">
                  <!-- 开始年龄 -->
                  <el-select v-model="form.minAge" placeholder="请选择">
                    <el-option v-for="item in ageList" :label="item.name" :value="item.val" :disabled="item.val>form.age.endAge&&item.val!=='all'" />
                  </el-select>
                </el-col>

                <el-col :span="12">
                  <!-- 结束年龄 -->
                  <el-select v-model="form.endAge" placeholder="请选择">
                    <template v-for="item in ageList">
                      <el-option v-if="item.val!=='all'" :label="item.name" :value="item.val" :disabled="item.val<form.age.minAge" />
                    </template>
                  </el-select>
                </el-col>
              </el-row>

            </el-col>
          </el-row>
        </el-form-item>

        <!-- <el-form-item label="目标用户地理位置">
          <el-input placeholder="如果您的广告系列是针对多个国家和地区设置的,则不可用" />
        </el-form-item> -->

        <el-form-item label="广告投放时间设置">
          <el-row :gutter="14">
            <el-col :span="12">
              <el-date-picker v-model="value1" type="datetime" placeholder="选择开始日期时间" />
            </el-col>

            <el-col :span="12">
              <el-date-picker v-model="value1" type="datetime" placeholder="选择结束日期时间" />
            </el-col>

          </el-row>
        </el-form-item>

        <el-form-item label="分时段">
          <div class="day-prt-box">
            <day-parting-box />
          </div>
        </el-form-item>

      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button type="success" size="small" @click="handleSub">保存</el-button>
    </div>
  </el-dialog>

</template>

<script>
import dayPartingBox from './day-parting-box.vue'
export default {
  components: {
    dayPartingBox
  },
  props: {
    visible: {
      default: false
    },
    title: {
      default: '受众'
    },
    info: {
      type: Object
    }

  },
  data() {
    return {
      ageList: [{
        name: '不限年龄段',
        val: 'all'
      }],

      form: {
        startAge: undefined, // 开始年龄
        endAge: undefined, // 结束年龄
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  watch: {
    visible() {
      this.show = this.visible
    }
  },
  mounted() {
    for (let i = 18; i < 66; i++) {
      this.ageList.push({
        name: i <= 65 ? i : '65+',
        val: i <= 65 ? i : '65+'
      })
    }
    this.form = this.info
  },
  methods: {
    // 取消
    handleClose() {
      this.$confirm('您的设置参数还未保存，确认退出吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning'
      }).then(() => {
        this.$emit('update:visible', false)
      })
    },
    hanldeSub() {
    }
  }
}
</script>
<style lang="scss" scoped="true">
  .yyy-dialog {
    ::v-deep .el-dialog {
      width: 470px;
    }

    #audiences-form .el-select,
    #audiences-form .el-form-item__content,
    #audiences-form .el-input,
    #audiences-form .el-input__inner {
      width: 100% !important;
    }

    #audiences-form .el-form-item {
      margin-bottom: 8px;
    }

    #audiences-form .el-form--label-top .el-form-item__label {
      padding: 0;
    }

    ::v-deep .el-dialog__header {
      border-bottom: 1px solid #ddd;

      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 2rem;
          color: #303134;
        }

        i {
          font-size: 3.4rem;
          color: #BDBDBD;
        }
      }

    }

    .el-dialog__body {
      width: 1300px;

      .dialog-main {
        display: flex;

        .lt {
          flex: 1;
        }

        .rt {
          flex: 2;
        }
      }

      .add-box {
        display: flex;
        width: 100%;
        margin-bottom: 20px;

        .el-input {
          flex: 1;
          margin-right: 2rem;
        }
      }

    }
  }

  .choose-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    height: 4.67rem;
    background: #E6F7FF;
    border: 1px solid #3193FE;
    border-radius: 2px;
    padding-left: 2rem;
    padding-right: 1.6rem;
    font-size: 1.6rem;

    .num {
      display: flex;
      align-items: center;

      i {
        font-size: 2rem;
        color: #0094FF;
        margin-right: 1.8rem;
      }

      span {
        em {
          padding: 0 6px;
          color: #3193FE;
        }
      }
    }

    .type {

      span {
        color: #8F939B;
        margin-right: 7rem;
        cursor: pointer;

        &.active {
          color: #3193FE;
        }
      }
    }

    .del {
      cursor: pointer;
      color: #3193FE;
    }
  }

  .series-table ::v-deep .el-table__header-wrapper {

    thead {

      // background-color: red;
      tr {

        background-color: #f1f1f1 !important;
      }
    }

  }
</style>
